import { Form, Button, Input, Toast } from "antd-mobile";
import { useEffect } from "react";

const ServerIp = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    window.localStorage.setItem('SERVER_IP', form.getFieldValue('ipAddr'));
    Toast.show({
      icon: 'success',
      content: '保存成功',
      maskClickable: false,
    });
  };

  useEffect(() => {
    form.setFieldValue('ipAddr', window.localStorage.getItem('SERVER_IP'));
  }, []);

  return (
    <Form
      form={form}
      onFinish={onFinish}
      footer={
        <Button block type="submit" color="primary" size="large">
          保存
        </Button>
      }
    >
      <Form.Header>后端服务配置</Form.Header>
      <Form.Item
        name="ipAddr"
        label="IP地址"
        rules={[
          {
            pattern: new RegExp(
              "^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
            ),
            message: "请输入正确的IP地址!",
          },
          { required: true, message: "请输入正确的IP地址!" },
        ]}
      >
        <Input placeholder="请输入" />
      </Form.Item>
    </Form>
  );
};

export default ServerIp;
